import { Component, OnInit } from '@angular/core';

// 引入服务
import { StorageService } from '../../services/storage.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public imagedizhi:string="assets/images/1.jpg"

  public list:any[]=[
    {title:"我是新闻1",content:"我是内容1"},
    {title:"我是新闻2",content:"我是内容2"},
    {title:"我是新闻3",content:"我是内容3"},
    {title:"我是新闻4",content:"我是内容4"}]

  public flag:boolean=true;

  public orderStatus:number=2; // 1、已经支付 2、支付并确认订单 3、表示已经发货 4、已经收货   其它、无效

  public attr:string="red";

  public today:any=new Date();

  public title="我是首页组件的标题";

  public keywords:any="你好";

  constructor( public storge:StorageService) { }

  ngOnInit() {
    // 1、同步方法
    // this.storge.getData()

    // 2、callback获取异步数据
    this.storge.getCallbackData((data)=>{
      console.log(data)
    })
    
    // 3、promise获取异步数据
    var promiseDate=this.storge.getPromiseData();
    promiseDate.then((data)=>{
      console.log(data)
    })

    // 4、rsjs获取异步方法里面的数据
    var rxjs=this.storge.getRxjsData();
    rxjs.subscribe((data2)=>{
        console.log(data2)
    })

    // 5、rxjs里面过1s以后撤回刚才的操作
    var steam=this.storge.getRxjsData();

    var d=steam.subscribe((data2)=>{
        console.log(data2+"222")
    })
    // 1s以后撤回
    setTimeout(() => {
      d.unsubscribe() // 取消订阅
    }, 1000);


    // 6、promise 执行多次(没有这个能力)
    var promiseinterval=this.storge.getPromiseIntervalData();
    promiseinterval.then((data)=>{
      console.log(data)
    })

    // 7、rxjs 执行多次
    var rxjssteam=this.storge.getRxjsIntervalData()
    rxjssteam.subscribe((data2)=>{
        console.log(data2)
    })
  
    // 8、用工具方法对返回的数据进行处理---我这里用不了
    // 工具方法可以多个一起使用
    // 工具方法在pipe里面，有filter、map等等
    // map((value)=>{
    //   return value*value
    // })

    // 
    // var rxjssteamnum=this.storge.getRxjsNumIntervalData()
    // rxjssteamnum.pipe(
    //   // 添加了一个过滤器
    //   filter((value)=>{
    //     if(value%2==0) {
    //       return true;
    //     }
    //   })
    // )
    // .subscribe((data2)=>{
    //     console.log(data2)
    // })
  }

  // 定义的事件写到最底下
  hello(){
    alert("我是父组件的hello方法");
  }

  changeDate(e){
    console.log("传过来的数据是："+e)
    this.title='数据改变了'
  }
  keydown(e){
    console.log(e)
    console.log('点击了'+e.key)
    console.log("值是"+e.target.value)
  }
  keyup(e){
    console.log(e)
    console.log('点击了'+e.key)
    console.log("值是"+e.target.value)
  }

  bianse(e){
    console.log(e)
    e.target.style.color="red"
  }

  click2(){
    alert(this.keywords);
  }
}
